<template>
  <!-- <pdfView :pdfUrl="jsPdf"/> -->
  <van-nav-bar title="签字确认" fixed placeholder left-arrow @click-left="onBack"> </van-nav-bar>
  <div class="sign-canvas">
    <div class="esignBox">
      <vue-esign
        ref="esignRef"
        :width="screenWidth"
        :height="screenHeight"
        :isCrop="isCrop"
        :isClearBgColor="false"
        :lineWidth="lineWidth"
        :lineColor="lineColor"
      />
    </div>
  </div>
  <div class="buttonBox">
    <Button style="width: 48%" @click="handleReset">重置</Button>
    <Button style="width: 48%" type="primary" @click="handleGenerate">确定</Button>
  </div>
</template>

<script lang="ts" setup>
import { ref, unref } from 'vue'
import vueEsign from 'vue-esign'
import { Button, closeDialog, closeToast, showLoadingToast } from 'vant'
import { uploadFile, docSign, getQiniuToken } from '@/api/realName'
import { useRoute, useRouter } from 'vue-router'
import 'vant/es/toast/style/index'
import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()

const userInfo = appStore.getUserInfo
const { push, back } = useRouter()
const route = useRoute()
const onBack = () => {
  back()
}
const isCrop = ref(false)
const lineWidth = ref(5)
const lineColor = ref('#000000')
const resultImg = ref('')
const screenHeight = ref(window.innerHeight)
const screenWidth = ref(window.innerWidth)

const imgSrc = ref('')

const esignRef = ref(null)

const handleReset = () => {
  const esign = unref(esignRef)
  esign?.reset()
}
const token = ref()
const getUploadToken = async () => {
  let res = await getQiniuToken()
  console.log(res)
  token.value = res.message
}
getUploadToken()
const imgUrl = 'http://etc.img.xingchuangke.net/'
const handleGenerate = () => {
  const esign = unref(esignRef)
  showLoadingToast({
    message: '上传中',
    duration: 0
  })
  esign
    ?.generate()
    .then((res) => {
      imgSrc.value = res
      const file = base64ImgtoFile(imgSrc.value, userInfo.name + '签名' + new Date().getTime())
      console.log(file)
      uploadFile({
        file: file,
        key: 'base/' + file.name,
        token: token.value
      }).then((res) => {
        console.log(res)
        docSign({
          userId: userInfo.id,
          imgSignPath: imgUrl + res.key
        }).then((docres: any) => {
          console.log(docres)
          closeToast()
          if (docres.success) {
            push({
              name: 'newTask'
            })
          }
        })
      })
    })
    .catch((err) => {
      console.log('画布没有签字时会执行这里 Not Signned')
    })
}
const base64ImgtoFile = (dataurl, fileName = 'file') => {
  const arr = dataurl.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const suffix = mime.split('/')[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${fileName}.${suffix}`, { type: mime })
}
</script>

<style>
.sign-canvas {
  display: flex;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.esignBox {
}
.tip {
  width: 40px;
  font-size: 24px;
  text-align: center;
  height: 100vh;
  display: flex;
  align-items: center;
}
.sign-canvas canvas {
  background: linear-gradient(to right, #e0eafc, #cfdef3);
  background-image: url('@/assets/esignBg.png') !important;
}
.sign-btn {
  display: flex;
  margin: 20px 0;
}
.sign-btn div {
  width: 175px;
  text-align: center;
  height: 70px;
  line-height: 70px;
  color: #ffffff;
}
.sign-btn div:active {
  background-color: #cccccc;
  color: #333333;
}
.sign-btn .clear {
  background-color: #ff8f58;
}
.sign-btn .save {
  background-color: #0599d7;
}
.buttonBox {
  position: absolute;
  width: 100vw;
  bottom: 20%;
  right: 0;
  left: -40%;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  transform: rotate(90deg);
}
</style>
